<template >
    <div style="margin-top: 15px;" >
        <el-button-group class="page" id="demo">
            <el-button type="primary"  @click="FirstPage()">回到首页</el-button>
            <el-button type="primary" icon="el-icon-arrow-left" @click="lastPage()">上一页</el-button>
            <el-button type="primary" @click="nextPage()">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-button-group>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="beginDate"
                    label="签到日期"
                    sortable
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="beginTime"
                    label="打卡时间"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="打卡情况"
                    width="200">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        methods:{
            FirstPage(){
                var id="1";
                window.sessionStorage.setItem("id",id);
                location.reload();
            },
            lastPage(){
                let numb=Number(window.sessionStorage.getItem("id"));
                window.sessionStorage.setItem("id",String(numb-20));
                location.reload();
            },
            nextPage(){
                let numb=Number(window.sessionStorage.getItem("id"));
                window.sessionStorage.setItem("id",String(numb+20));
                location.reload()
            },
        },
        data() {
            return {
                input1: '编号',
                input2: '姓名',
                input3: '签到日期',
                input4: '',
                input5: '打卡时间',
                input6: '打卡情况',
                select: '请选择',
                tableData: null,
            }
        },
        created(){
            const _this = this
            this.$http.post("attendance/findList",window.sessionStorage.getItem("id")).then(function(resp){
                _this.tableData=resp.data.data
            })
        }
    }
</script>

<style>
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    .page{
        float: right;
    }
</style>
